<!--
 * @description: 新增提现工单
 * @Author: latiao
 * @Date: 2021-11-10 14:36:19
 * @LastEditors: vikingShip
 * @LastEditTime: 2022-01-08 19:22:36
-->
<template>
  <div class="ticket">
    <m-container
      class="order"
      :current.sync="form.current"
      :size.sync="form.size"
      :total.sync="total"
    >
      <template slot="form">
        <m-card
          class="form"
          hide-text="展开搜索条件"
          show-text="收起搜索条件"
          :needToggle="true"
        >
          <el-form ref="form" label-width="80px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="姓名">
                  <el-input
                    v-model="form.name"
                    placeholder="请输入姓名"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="ID">
                  <el-input v-model="form.id" placeholder="请输入ID">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="申请时间">
                  <el-date-picker
                    v-model="createTime"
                    style="width: 390px"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="chooseTime"
                  ></el-date-picker>
                  <!-- <el-date-picker v-model="form.applyTime"
                              style="width:390px"
                              type="date"
                              placeholder="选择日期">
              </el-date-picker> -->
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item>
                  <el-button type="primary" @click="getWithdrawalList">
                    搜索
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </m-card>
      </template>
      <template slot="content">
        <el-tabs v-model="form.auditStatus">
          <el-tab-pane label="待审核" name="PENDING_PARTNER"></el-tab-pane>
          <!-- <el-tab-pane label="审核中" name="PENDING_MAIN"> </el-tab-pane> -->
          <el-tab-pane label="已打款" name="PASSED"></el-tab-pane>
          <el-tab-pane label="已拒绝" name="REJECTED"></el-tab-pane>
        </el-tabs>

        <div class="ticket__form">
          <div>
            <!-- <el-button size="medium"
                   v-if="isPending"
                   :disabled="!tableCheckedItem.length">导出</el-button> -->
            <el-button
              size="medium"
              @click="bulkNote(tableCheckedItem)"
              :disabled="!tableCheckedItem.length"
              >批量备注</el-button
            >
          </div>
          <div>
            <el-select
              v-model="form.accountType"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>

        <m-table
          class="table"
          :data="list"
          :selection="true"
          :columns="columns"
          :checked-item.sync="tableCheckedItem"
          :custom="true"
          slot="content"
        >
          <template v-slot:header="{ row }">
            <div style="width: 100%">
              <span class="mr-50">ID：{{ row.id }}</span>
              <span class="mr-50">申请时间：{{ row.createTime }}</span>
              <span
                class="mr-50"
                v-if="row.updateTime && timeText(row.auditStatus)"
                >{{ timeText(row.auditStatus) }}：{{ row.updateTime }}</span
              >

              <span
                @click="bulkNote([row])"
                style="float: right"
                :class="{ 'has-data': row.note }"
                ><i class="iconfont iconPC-beizhu"></i
              ></span>
            </div>
          </template>
          <template v-slot:custom-body="{ row }">
            <tr>
              <td>
                <div class="info">
                  <img
                    class="info--l"
                    :src="row.userAvatarUrl"
                    style="margin-right: 10px"
                  />
                  <div class="info--r">
                    {{ row.userName }}
                    <br />
                    {{ row.phone }}
                  </div>
                </div>
              </td>
              <td style="width:10px">
                <span v-if="row.channel === 'BANK'"
                  >开户行：{{ row.bankName }}
                </span>
                <br />
                <div  v-if="row.channel === 'OFFLINE'">
                {{ getChannel(row.channel) }}
                </div>
                <div v-if="row.channel === 'WECAHT'">
                {{ getChannel(row.channel, true) }}：
                {{ getChannelVal(row.channel, row) }}
                </div>
              </td>
              <td class="tc">
                申请提现金额：{{ row.amount }} <br />
                <!-- 入股费：10 <br>
            实际打款：10 <br> -->
              </td>
              <td class="tc">
                {{ row.channel === "WECAHT" ? "自动打款" : "手动打款" }}
              </td>
              <td class="tc">
                {{ getChanneName(row.channel) }}
              </td>
              <td class="tc">
                {{ getAuditStatusName(row.auditStatus) }}
              </td>
              <td v-if="isPending" >
                
                <el-button @click="pass(row)" type="primary" size="mini" round
                  >结算</el-button
                >
                <el-button @click="passOffline(row)" type="primary" size="mini" round
                  >线下结算</el-button
                >
                <el-button
                  @click="reject(row)"
                  type="danger"
                  plain
                  size="mini"
                  round
                  >拒绝</el-button
                >
            
              </td>
            </tr>
          </template>
        </m-table>
      </template>
    </m-container>
    <RemarkModal
      v-model="remarklVisible"
      :currentOrder="currentList[0]"
      :title="currentList.length === 1 ? '备注' : '批量备注'"
      @onOk="bulkNoteRequest"
      @onCancel="toggleRemarklVisible"
    />
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import { getWithdrawalList,reject, pass, bulkNote } from "@/api/finance/index";
import DateUtil from "@/store/modules/date";
import RemarkModal from "@/views/order/components/RemarkModal.vue";

const startTime = +new Date() - 7 * 24 * 60 * 60 * 1000;
const endTime = +new Date() + 7 * 24 * 60 * 60 * 1000;

@Component({ components: { RemarkModal } })
export default class WithdrawalTicket extends Vue {
  form = {
    // ASS, AREA_ASS, POINT
    accountType: "",
    auditStatus: "PENDING_PARTNER",
    id: "",
    keyword: "",
    name: "",
    applyTime: "",
    startTime: new DateUtil("").getYMDs(startTime),
    endTime: new DateUtil("").getYMDs(endTime),
    current: 1,
    size: 10,
  };

  total = 0;

  list = [];

  tableCheckedItem = [];

  createTime = [startTime, endTime];

  remarklVisible = false;

  currentList = [];

  options = [
    {
      label: "普通会员",
      value: "",
    }
  ];

  get columns() {
    return [
      {
        label: "基本信息",
        width: 100,
      },
      {
        label: "账户信息",
        width: 90,
        coustomStyle: "text-align: left;",
      },
      {
        label: "提现信息",
        width: 100,
      },
      {
        label: "结算方式",
        width: 60,
      },
      {
        label: "提现方式",
        width: 60,
      },
      {
        label: "状态",
        width: 60,
      },
    ].concat(
      this.isPending
        ? [
          {
            label: "操作",
            width: 160,
          },
        ]
        : [],
    );
  }

  get isPending() {
    return this.form.auditStatus === "PENDING_PARTNER";
  }

  @Watch("form.size")
  handleSizeChange() {
    this.getWithdrawalList();
  }

  @Watch("form.current")
  handleCurrentChange() {
    this.getWithdrawalList();
  }

  @Watch("form.auditStatus")
  handleStatusChange() {
    this.getWithdrawalList();
  }

  @Watch("form.accountType")
  handleAccountTypeChange() {
    this.getWithdrawalList();
  }

  created() {
    this.getWithdrawalList();
  }

  getWithdrawalList() {
    getWithdrawalList({ ...this.form, ...this.$route.query })
      .then(res => {
        const { list, total, ...other } = res.data;
        this.list = list;
        this.total = total;
        Object.assign(this.form, other);
      })
      .catch(err => {
        this.$message.warning(err || "工单获取失败");
      });
  }

  /**
   * 选择时间
   */
  chooseTime(data) {
    this.form.startTime = data ? new DateUtil("").getYMDs(data[0]) : "";
    this.form.endTime = data ? new DateUtil("").getYMDs(data[1]) : "";
    this.getWithdrawalList();
  }

  bulkNoteRequest(data) {
    console.log(data);

    bulkNote(
      this.currentList.map(item => item.id),
      data.note,
      data.over,
    )
      .then(() => {
        this.getWithdrawalList();
        this.toggleRemarklVisible();
        this.$message.success("操作成功");
      })
      .catch(err => {
        this.$message.warning(err || "操作失败");
      });
  }

  bulkNote(list) {
    this.currentList = list;
    this.toggleRemarklVisible();
  }

  reject(row) {
    this.$prompt(``, `拒绝说明`, {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      inputType: "textarea",
      inputPattern: /\S{1,}/,
      inputErrorMessage: "拒绝说明不可为空",
    }).then((res: any) => {
      reject({ id: row.id, reason: res.value })
        .then(() => {
          this.getWithdrawalList();
          this.$message.success("操作成功");
        })
        .catch(err => {
          this.$message.warning(err || "工单获取失败");
        });
    });
  }

  pass(row) {
    const request = data => 
      pass({...data,channel:"0"})
        .then(() => { console.log("123123123123",data);
          this.getWithdrawalList();
          loading.close();
          this.$message.success("操作成功");
        })
        .catch(err => {console.log("123123123123",data);
          this.$message.warning(err || "工单获取失败");
        });
    // 如果提现方式不为微信需输入交易流水号
    if (row.channel !== "WECAHT") {
      this.$confirm("确认结算", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        // inputPattern: /\S{1,}/,
        // inputErrorMessage: "交易订单号不可为空",
      })
        .then((res: any) => {
          request({ id: row.id, tradeNo: res.value });
        })
        .catch(() => null);
      return;
    }
     const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
    this.$confirm("确认结算", "提示")
      .then(() => {
        request({ id: row.id });
      })
      .catch(() => {
         loading.close();
      });
  }

  passOffline(row) {
    const request = data => 
      pass({...data,channel:"3"})
        .then(() => { console.log("123123123123",data);
          this.getWithdrawalList();
          loading.close();
          this.$message.success("操作成功");
        })
        .catch(err => {console.log("123123123123",data);
          this.$message.warning(err || "工单获取失败");
        });
    // 如果提现方式不为微信需输入交易流水号
    if (row.channel !== "WECAHT") {
      this.$confirm("确认结算", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        // inputPattern: /\S{1,}/,
        // inputErrorMessage: "交易订单号不可为空",
      })
        .then((res: any) => {
          request({ id: row.id, tradeNo: res.value });
        })
        .catch(() => null);
      return;
    }
    const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
    this.$confirm("确认结算", "提示")
      .then(() => {
        request({ id: row.id });
      })
      .catch(() => null);
  }

  getChannel(key, needSuff = false) {
    return (
      {
        WECAHT: "微信",
        ALIPAY: "支付宝",
        BANK: "银行卡",
        OFFLINE:"线下结算"
      }[key] + (needSuff ? "号" : "")
    );
  }

  getChanneName(key) {
    return {
      WECAHT: "微信钱包",
      ALIPAY: "支付宝",
      BANK: "银行卡",
      OFFLINE:"线下结算"
    }[key];
  }

  getChannelVal(key, item) {
    return {
      WECAHT: item.userName,
      ALIPAY: item.account,
      BANK: item.account,
    }[key];
  }

  timeText(key) {
    return {
      PASSED: "到账时间",
      REJECTED: "拒绝时间",
    }[key];
  }

  getAuditStatusName(key) {
    return {
      PENDING_PARTNER: "待审核",
      PENDING_MAIN: "审核中",
      PASSED: "已成功",
      REJECTED: "已拒绝",
    }[key];
  }

  toggleRemarklVisible() {
    this.remarklVisible = !this.remarklVisible;
  }
}
</script>

<style lang="scss" scoped>
@include b(ticket) {
  .info {
    @include flex(flex-start);

    .info--l {
      width: 50px;
    }
  }

  @include e(form) {
    @include flex(space-between);
    margin: 0 0 10px;
  }

  .table {
    margin-bottom: 10px;
  }

  .mr-50 {
    margin-right: 50px;
  }

  .has-data {
    color: red;
  }

  .tc {
    text-align: center;
  }
}
</style>
